<template>
    <h3 class="nearby__tlite">附近店铺</h3>
    <ul class="nearby__conten">
      <router-link :to="`/shop/${item._id}`" v-for="item in dataList" :key="item.id">
        <NearbyItem :item="item" :showBorder="showBorder"/>
      </router-link>
    </ul>
</template>

<script>
import { get } from '../../utils/axiosPost'
import { reactive, toRefs } from 'vue'
import NearbyItem from './nearby-component/NearbyItem.vue'

const getShopFn = () => {
  const nearbyList = reactive({ dataList: [] })
  const getShop = async () => {
    const result = await get('/api/shop/hot-list')
    nearbyList.dataList = result
  }
  return { nearbyList, getShop }
}

export default {
  name: 'Bearby',
  components: { NearbyItem },
  setup () {
    const showBorder = false
    const { nearbyList, getShop } = getShopFn()
    getShop()
    const { dataList } = toRefs(nearbyList)
    return { dataList, showBorder }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/colorValue.scss';
.nearby__tlite {
    line-height: .25rem;
    font-size: .18rem;
    color:$TextColor;
    font-weight: normal;
    margin:0 0 .14rem 0;
}
.nearby__conten {
    list-style: none;
    padding:0;
    margin:0;
    a {
      text-decoration: none;
      color: $TextColor;
    }
    a:visited {
      color: $TextColor;
    }
}
</style>
